<template>
    <div class="system-user-container layout-padding">
        <el-card class="layout-padding-auto" shadow="hover">
            <div class="system-user-search mb15">
                <el-input placeholder="请输入用户名称" size="default" v-model="state.tableData.param.username"
                          style="max-width: 180px"></el-input>
                <el-button class="ml10" size="default" type="primary" @click="getTableData">
                    <el-icon>
                        <ele-Search/>
                    </el-icon>
                    查询
                </el-button>
                <el-button class="ml10" size="default" type="success" @click="onOpenAddUser('add')">
                    <el-icon>
                        <ele-FolderAdd/>
                    </el-icon>
                    新增用户
                </el-button>
            </div>
            <el-table v-loading="state.tableData.loading" :data="state.tableData.data" style="width: 100%">
                <el-table-column label="序号" type="index" width="60"/>
                <el-table-column label="账户名称" prop="username" show-overflow-tooltip></el-table-column>
                <el-table-column label="用户昵称" prop="nickname" show-overflow-tooltip></el-table-column>
                <el-table-column label="关联角色" prop="roles" show-overflow-tooltip></el-table-column>
                <el-table-column label="手机号" prop="mobile" show-overflow-tooltip></el-table-column>
                <el-table-column label="邮箱" prop="email" show-overflow-tooltip></el-table-column>
                <!--                <el-table-column label="用户状态" prop="status" show-overflow-tooltip>-->
                <!--                    <template #default="scope">-->
                <!--                        <el-tag v-if="scope.row.status" type="success">启用</el-tag>-->
                <!--                        <el-tag v-else type="info">禁用</el-tag>-->
                <!--                    </template>-->
                <!--                </el-table-column>-->
                <el-table-column label="用户描述" prop="resume" show-overflow-tooltip></el-table-column>
                <el-table-column label="创建时间" prop="createTime" min-width="90px"
                                 show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" width="100">
                    <template #default="scope">
<!--                        todo 暂时不支持修改-->
                        <el-button size="small" text type="primary"
                                   disabled
                                   v-auth="'admin'"
                                   @click="onOpenEditUser('edit', scope.row)"
                        >修改
                        </el-button
                        >
                        <el-button size="small" text type="primary"
                                   @click="onRowDel(scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                v-model:current-page="state.tableData.param.page"
                v-model:page-size="state.tableData.param.size"
                :page-sizes="[10, 20, 30]"
                :total="state.tableData.totalCount"
                background
                class="mt15"
                layout="total, sizes, prev, pager, next, jumper"
            >
            </el-pagination>
        </el-card>
        <UserDialog ref="userDialogRef" @refresh="getTableData()"/>
    </div>
</template>

<script lang="ts" name="systemUser" setup>
import {defineAsyncComponent, onMounted, reactive, ref, watch} from 'vue';
import {ElMessage, ElMessageBox} from 'element-plus';
import {userApi} from "/@/api/user";

// 引入组件
const UserDialog = defineAsyncComponent(() => import('/@/views/system/user/dialog.vue'));

// 定义变量内容
const userDialogRef = ref();

const state = reactive<AdminUserState>({
    tableData: {
        data: [],
        totalCount: 0,
        loading: false,
        param: {
            page: 1,
            size: 10,
        },
    },
});

// 初始化表格数据
const getTableData = async () => {
    state.tableData.loading = true;
    const pageResult = await userApi.listUser(state.tableData.param);
    state.tableData.data = pageResult.records;
    state.tableData.totalCount = pageResult.totalCount;
    state.tableData.loading = false;
};
// 打开新增用户弹窗
const onOpenAddUser = (type: string) => {
    userDialogRef.value.openDialog(type);
};
// 打开修改用户弹窗
const onOpenEditUser = (type: string, row: AdminUserVo) => {
    userDialogRef.value.openDialog(type, row);
};

const onRowDel = (row: AdminUserVo) => {
    ElMessageBox.confirm(`此操作将永久删除账户名称：“${row.username}”，是否继续?`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            getTableData();
            ElMessage.success('删除成功');
        })
        .catch(() => {
        });
};
watch(()=>state.tableData.param.page,()=>{
    getTableData();
})
watch(()=>state.tableData.param.size,()=>{
    getTableData();
})
// 页面加载时
onMounted(() => {
    getTableData();
});
</script>

<style lang="scss" scoped>
.system-user-container {
    :deep(.el-card__body) {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: auto;

        .el-table {
            flex: 1;
        }
    }
}
</style>
